<template>
  <!-- 直播状态 -->
  <div class="live-status-box" :class="small ?'small-live-status-box':''">
      <!-- 预告 -->
      <p class="notice-box" v-if="status == 0">
        <i></i>
        <span>预告</span>
      </p>
      <!-- 直播中 -->
      <p class="live-box" v-else-if="status == 1">
          <i></i>
          <span>直播中</span>
      </p>
      <!-- 回看 -->
      <p class="lookback-box" v-else-if="status == 4">
        <i></i>
        <span>回看</span>
      </p>
      <!-- 广告 -->
      <p class="ad-box" v-else-if="status == 3">
        <span>广告</span>
      </p>
      <!-- 广告 -->
      <p class="offline-box" v-else-if="status == 2">
        <i></i>
        <span>已结束</span>
      </p>

  </div>
</template>

<script>

  export default {
    props: {
      status : null,//0预告 1直播中 2 回看 3 广告 4下线
      small:{ //大小两种 大的样式如banner 小的如直播预告
        type:Boolean,
        default:false,
      }
    },
    data() {
      return {
      };
    },
    computed: {},
    created() {},

    mounted() {},
    methods: {
    },
    watch: {},
  };

</script>

<style scoped="scoped">
.live-status-box{
    height: 44px;
    width: 128px;
    display: flex;
    flex-direction: row-reverse;
}
.live-status-box p{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 29px;
    
    color: #FFFFFF;    
    line-height: 44px;
}
.live-status-box p span{
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 26px;
  font-weight: 500;
}
.live-status-box p i{
   height: 32px;
   width: 32px;
   margin-left: 8px;
   margin-right: 2px;
}
.notice-box{
     background: linear-gradient(180deg, #5CDBD3 0%, #1690FF 100%);
}
.notice-box i{
    margin-right: 10px!important;
    background :url('../../../assets/images/zhxyk/home/notice.png') no-repeat;
    background-size: 100% 100%;
}
.lookback-box{
    background: linear-gradient(180deg, #FFE6BA 0%, #FA8C15 100%);
}
.lookback-box i{
    margin-right: 10px!important;
    background :url('../../../assets/images/zhxyk/home/look_back.png') no-repeat;
    background-size: 100% 100%;
}
.live-status-box .ad-box{
     height: 28px;
     width: 50px;
     text-align: center;
     border-radius: 5px;
     background:rgba(0, 0, 0, 0.2);
}
.live-status-box .ad-box span{ 
     display: inline-block;
     width: 100%;
     text-align: center;
     line-height: 28px;
     font-size: 20px;
     line-height: 28px;
     transform: scale(0.8);
     -webkit-transform: scale(0.8);
     font-weight: 500;
     color: #FFFFFF;
}
.live-box{
    background: linear-gradient(180deg, #FFA771 0%, #FF6059 100%);
}
.live-box i{  
    background: url('../../../assets/images/zhxyk/home/live.gif') no-repeat;
    background-size: 100% 100%;
}
.offline-box{
  background: linear-gradient(180deg, #E7E7E7 0%, #5F5F5F 100%);
}
.offline-box i{
    background: url('../../../assets/images/zhxyk/home/offline.png') no-repeat;
    background-size: 100% 100%;
}
.small-live-status-box p{
  transform: scale(0.8);
}
</style>
